今天來簡單觀察下Websocket的連接與一般的http式的差別(採用fetch方式)

如何觀察

既然要觀察還是說一下觀察方式好了，簡單一點就是打開網站後開啟【檢視】模式(F12)

然後在上方切換到Network

切好後下面就可查看通訊的狀況囉

觀察

運用上篇的server來觀察，直接打開你可以看到

如果沒有看到可以先把檢視調到Network後再重整頁面

之後在原本的index.html與js上添加

//html
<button id="send">send</button>
///js
let send = document.getElementById("send");
send.addEventListener("click", () => {
                ws.send("Hi!");
            });

你一直點擊按鈕可發現怎麼call他都不會再次產生新的連接，這其實也是說明了Websocket握手後，就會一直持續交握了

我們換成fetch就會很敏感

html部分新增
<button id="fetchDataBtn">Fetch Data</button>
<pre id="result"></pre>

js部分新增
document.getElementById('fetchDataBtn').addEventListener('click', () => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
                    }
                    return response.json();
                })
        .then(data => {
            document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                })
        .catch(error => {
            document.getElementById('result').textContent = 'Fetch error: ' + error.message;
                });
        });

之後打開Network後點擊btn

每點一次就會有一條fetch的連接，兩者觀察起來就很有區別了吧

這裡有點小水一下，下篇會認真觀察Websocket的流程